<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>美食</button>
  <button>游戏</button>
  <button>电影</button>
  <button>小说</button>

  <script>
    // 1.获取所有button标签
    const btn = document.querySelectorAll('button');

    //2.循环所有按钮
    btn.forEach((item) => {
      //3.为每一个按钮设置点击事件
      item.addEventListener('click', () => {
        //4.先去掉所有按钮的颜色
        btn.forEach((e) => {
          e.style.backgroundColor = ""
        })
        //5.为选中按钮添加颜色
        item.style.backgroundColor = "red"
      })
    })
  </script>
</body>

</html>